<div class="project">
    <div class="project-menu">
        <div class="scroll-bar">
            <div class="menu-container">
                <g-menu-item 
                    class="menu-item"
                    :data="appList"
                    :selected="selected"
                    :key="appList.name"
                    @on-select="switchNav" >
                </g-menu-item>
            </div>
        </div>
    </div>
    <div class="project-content">
        <div v-if="selected == 'list'">
            <div class="top clearfix" style="margin-right:0;">
                <!-- <el-row class="top-stat" :gutter="20">
                    <el-col :span="12" v-for="item in workOrderStatusList" :key="item.code">
                        <div class="number">{{item.count}}</div>
                        <div>{{item.name}}</div>
                    </el-col>
                </el-row> -->
                <div class="top-stat">
                    <ul class="clearfix">
                        <li v-for="item in workOrderStatusList">
                            <div class="number">{{item.count}}</div>
                            <div>{{item.name}}</div>
                        </li>
                    </ul>
                </div>
                
                <ul class="clearfix" style="margin-right:50px;">
                    <li>
                        <el-input 
                              class="search-input"
                              v-model="searchInput"
                              @change="handleSearchInputChange"
                              prefix-icon="iconfont icon-search" 
                              size="small" 
                              placeholder="请输入搜索标题">
                        </el-input>
                    </li>
                    <li>
                        <span class="iconfont icon-sort-desc"></span> 时间
                    </li>
                </ul>
            </div>
            <div class="list">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column
                        prop="sheetId"
                        label="编号"
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="sheetTypeName"
                        label="分类"
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="description"
                        label="问题描述"
                        min-width="200">
                    </el-table-column>
                    <el-table-column
                        prop="submitDate"
                        label="提交时间"
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        prop="sheetStatusName"
                        label="状态"
                        min-width="100">
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        min-width="170"
                        align="center"
                        >
                        <template slot-scope="scope">
                            <div>
                                <el-button @click="queryDetail(scope.row)" size="small" round>
                                    详情
                                </el-button>
                                <el-button @click="deleteRow(scope.$index, tableData)" size="small" round>
                                    删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                       style="margin-top:20px;text-align: center;" 
                       @current-change="handleLoadMore"
                       @prev-click="handleLoadMore"
                       @next-click="handleLoadMore"
                       :current-page="curPage"
                       :page-size="8"
                       background 
                       layout="prev, pager, next"
                       :total="total">
                </el-pagination>
            </div>
        </div>
        <div style="height:90%;" v-else-if="selected == 'submit'">
            <div class="workOrder-steps">
                <div class="line"></div>
                <div class="step-item step1-item active">
                    <div @click="handleWorkOrderStep(1, $event)" class="step-item-bg">
                        <span>1</span>
                    </div>
                    <div>选择问题分类</div>
                </div>
                <div class="step-item step2-item">
                    <div class="step-item-bg">
                        <span>2</span>
                    </div>
                    <div>创建工单</div>
                </div>              
            </div>
            
            <div v-if="curWorkOrderStep == 1" class="problem-category">
                <ul class="clearfix">
                    <li>
                        <div @click="handleWorkOrder('空间落位',0)" class="box-item clearfix">
                            <div class="left">
                                <span class="iconfont icon-ditufuwu"></span>
                            </div>
                            <div class="right">
                                <h2>空间落位</h2>
                                <span>实现带空间属性数据的地图落位</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div @click="handleWorkOrder('数据转换',1)" class="box-item clearfix">
                            <div class="left">
                                <span class="iconfont icon-taifengzhuanhuan"></span>
                            </div>
                            <div class="right">
                                <h2>数据转换</h2>
                                <span>实现不同坐标系统和格式数据<br>的相互转换</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div @click="handleWorkOrder('数据下载',2)" class="box-item clearfix">
                            <div class="left">
                                <span class="iconfont icon-xiazai"></span>
                            </div>
                            <div class="right">
                                <h2>数据下载</h2>
                                <span>提供用户感兴趣数据的下载功能</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div v-else-if="curWorkOrderStep == 2" class="make-workorder">
                <h2 class="workOrder-caption" style="margin-left:5px;">
                    {{curProblemCategory}}
                </h2>
                <el-scrollbar class="make-workorder-scrollbar">
                    <el-form class="make-workorder-form" 
                            ref="form" 
                            size="small"
                            label-width="120px">
                        <el-form-item v-if="formData.sheetType==2" label="数据ID">
                            <el-input v-model="formData.downLoadDataUuid"></el-input>
                        </el-form-item>
                        <el-form-item label="数据用途">
                            <el-input v-model="formData.dataUsage"></el-input>
                        </el-form-item>
                        <el-form-item v-if="formData.sheetType==1" label="数据涉密">
                            <el-radio-group v-model="formData.dataSecret">
                                <el-radio label="是" value="1"></el-radio>
                                <el-radio label="否" value="0"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="目标格式">
                            <el-radio-group v-model="formData.targetFormat">
                                <el-radio label="shp" value="shp"></el-radio>
                                <el-radio label="csv" value="csv"></el-radio>
                                <el-radio label="其它(在描述中说明)" value="other"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="问题描述">
                            <el-input rows="5" v-model="formData.description" type="textarea" placeholder="">
                            </el-input>
                        </el-form-item>
                        <el-form-item v-if="formData.sheetType==2" label="输出坐标">
                            <el-select v-model="formData.coordTarget" size="mini" placeholder="坐标系">
                                <el-option label="WGS84" value="WGS84"></el-option>
                                <el-option label="GCJ02" value="GCJ02"></el-option>
                                <el-option label="CGCS2000" value="CGCS2000"></el-option>
                                <el-option label="BD09" value="BD09"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="formData.sheetType==1" label="坐标转换">
                            <el-row :gutter="20" style="position:relative;left:-60px;">
                                <el-col :span="12">
                                    <el-form-item label="原始坐标">
                                        <el-select v-model="formData.coordOriginal" size="mini" placeholder="坐标系">
                                            <el-option label="WGS84" value="WGS84"></el-option>
                                            <el-option label="GCJ02" value="GCJ02"></el-option>
                                            <el-option label="CGCS2000" value="CGCS2000"></el-option>
                                            <el-option label="BD09" value="BD09"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="目标坐标">
                                        <el-select v-model="formData.coordTarget" size="mini" placeholder="坐标系">
                                            <el-option label="WGS84" value="WGS84"></el-option>
                                            <el-option label="GCJ02" value="GCJ02"></el-option>
                                            <el-option label="CGCS2000" value="CGCS2000"></el-option>
                                            <el-option label="BD09" value="BD09"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="联系人">
                            <el-input v-model="formData.contactsName"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input v-model="formData.mobile"></el-input>
                        </el-form-item>
                        <el-form-item label="文件上传">
                            <el-upload
                                class="upload-spatial-data"
                                ref="upload"
                                action=""
                                :file-list="fileList"
                                :show-file-list="true"
                                :on-change="handleUploadChange"
                                :auto-upload="false">
                                <el-button slot="trigger" size="small">上传附件</el-button>
                            </el-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="handleSubmit" size="small" type="primary">
                                提交工单
                            </el-button>
                        </el-form-item>
                    
                    </el-form>
                </el-scrollbar>
            </div>
        </div>
    </div>
    <el-dialog
        title="详情"
        :visible.sync="detailDialogVisible"
        width="800px">
        <div class="detail-dialog-body">
            <el-scrollbar style="height: 100%;">
                <div class="top clearfix">
                    <ul class="left">
                        <li>编号：<span>{{detailFormData.sheetId}}</span> </li>
                        <li>分类：<span>{{detailFormData.sheetTypeName}}</span> </li>
                        <li>联系手机：<span>{{detailFormData.mobile}}</span></li>
                    </ul>
                    <div class="right">
                        当前状态：<span>{{detailFormData.sheetStatusName}}</span> 
                    </div>
                </div>
                <div class="main">
                    <label class="caption">提交内容</label>
                    <el-form style="padding-right: 50px;margin-bottom: 20px;"
                            size="small" 
                            ref="detailForm" 
                            :model="detailFormData" 
                            label-width="80px">
                        <el-form-item v-if="detailFormData.sheetType==2" label="数据ID">
                            <el-input :disabled="true" v-model="detailFormData.downLoadDataUuid"></el-input>
                        </el-form-item>
                        <el-form-item label="数据用途">
                            <el-input :disabled="true" v-model="detailFormData.dataUsage"></el-input>
                        </el-form-item>
                        <el-form-item v-if="detailFormData.sheetType==1" label="数据涉密">
                            <span>{{detailFormData.dataSecret==0?'否':'是'}}</span>
                        </el-form-item>
                        <el-form-item label="目标格式">
                            <span>{{detailFormData.targetFormat}}</span>
                        </el-form-item>
                        <el-form-item label="问题描述">
                            <el-input :disabled="true" type="textarea" v-model="detailFormData.description">
                            </el-input>
                        </el-form-item>
                        <el-form-item v-if="detailFormData.sheetType==2" label="输出坐标">
                            {{detailFormData.coordTarget}}
                        </el-form-item>
                        <el-form-item v-if="detailFormData.sheetType==1" label="坐标转换">
                            <el-row :gutter="20" style="position:relative;left:-15px;">
                                <el-col :span="8">
                                    <el-form-item label="原始坐标：" label-width="85px">
                                        {{detailFormData.coordOriginal}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="目标坐标：" label-width="85px">
                                        {{detailFormData.coordTarget}}
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="文件上传">
                            <ul 
                                class="file-upload-item">
                                <li v-for="item in detailFormData.attachFile">
                                    {{item.fileName + item.fileExt}}
                                </li>
                            </ul>
                        </el-form-item>
                    </el-form>
                    <div v-if="detailFormData.downLoadFile" class="split-line"></div>
                    <div v-if="detailFormData.downLoadFile" class="bottom clearfix">
                        <div class="left">
                            <img style="width:48px;" src="../../../static/img/person.png" alt="">
                        </div>
                        <div class="right">
                            <ul>
                                <li style="color: #909598;">数据湖工程师：</li>
                                <li style="color: #232323;">您的数据已经空间化完成，点击下方链接即可下载，下载后可以直接上传</li>
                                <li>
                                    <ul class="downFileList">
                                        <li class="clearfix">
                                            {{detailFormData.downLoadFile.fileName}}
                                            <a target="_blank" :href="detailFormData.downLoadFile.url">下载</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </el-dialog>
</div>